<template>
  <div class="allBody">
    <el-form :model="fromData" :rules="fromData_rules" ref="fromDataRef" label-width="100px">
      <el-form-item label="工程名称" prop="name">
        <el-input v-model="fromData.name"></el-input>
      </el-form-item>

      <!-- <el-form-item label="里程前缀" prop="mileageIdentification">
        <el-input v-model="fromData.mileageIdentification"></el-input>
      </el-form-item>
      <el-form-item label="开始里程" prop="startMileage">
        <el-input v-model="fromData.startMileage"></el-input>
      </el-form-item>
      <el-form-item label="结束里程" prop="endMileage">
        <el-input v-model="fromData.endMileage"></el-input>
      </el-form-item> -->

      <el-form-item label="管理员" prop="projectManagerId">
        <!-- iSelectedStaff 是一个多次调用的组件 -->
        <div class="w100 flex_sb">
          <iSelectedStaff class="w100" :defaultSelect="fromData.projectManagerId" :checkbox="false" @selectChange="PM_selectChange">
            <div class="flex_1 padding_right">
              <div class="_tag _tag_default" v-if="catchArray.PMData">
                {{ catchArray.PMData.name }}
              </div>
              <div class="_tag _tag_default" v-else>无管理员</div>
            </div>
          </iSelectedStaff>
        </div>
      </el-form-item>

      <el-form-item label="工作基点" prop="basePointList">
        <section class="">
          <iSelectedDatumPoint class="w100" :defaultSelect="fromData.basePointList" :checkbox="true" @selectChange="GZJD_selectChange">
            <el-table :show-header="false" :data="catchArray.GXJDData" max-height="200px" style="width: 100%">
              <el-table-column prop="name" label="工作基点"> </el-table-column>
            </el-table>
          </iSelectedDatumPoint>
        </section>
      </el-form-item>
      <el-form-item label="建设单位" prop="entrustingOrg">
        <el-input v-model="fromData.entrustingOrg"></el-input>
      </el-form-item>
      <!-- <el-form-item label="施工单位" prop="monitoringOrg">
        <el-input v-model="fromData.monitoringOrg"></el-input>
      </el-form-item> -->

      <!-- <el-form-item label="委托单位" prop="accendant">
      <div class="w100 flex_sb">
        <div class="flex_1 padding_right">
          <div class="_tag _tag_default" v-if="catchArray.WTDWata">
            {{ catchArray.WTDWata.name }}
          </div>
          <div class="_tag _tag_default" v-else>无委托单位</div>
        </div>
        <div>
          <iSelectedCompany :defaultSelect="this.catchArray.WTDWata" :checkbox="false" @selectChange="WTDW_selectChange">
            <i class="el-icon-thumb"></i>
          </iSelectedCompany>
        </div>
      </div>
    </el-form-item> -->
      <el-form-item label="工程备注" prop="remark">
        <el-input type="textarea" v-model="fromData.remark"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    fromData: {},
    options: []
  },
  data() {
    return {
      // 设备,
      fromData_rules: {
        name: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
        mileageIdentification: [
          {
            required: true,
            message: '请输入里程前缀',
            trigger: 'mileageIdentification'
          }
        ],
        startMileage: [{ required: true, message: '请输入开始里程', trigger: 'startMileage' }],
        projectManagerId: [{ required: true, message: '请选择管理员', trigger: 'startMileage' }],
        endMileage: [{ required: true, message: '请输入结束里程', trigger: 'endMileage' }],
        accendant: [{ required: true, message: '请输入管理员', trigger: 'accendant' }]
      },
      catchArray: {
        PMData: null,
        GXJDData: null,
        WTDWata: null,
        JCDW: null,
        JLDW: null
      }
    }
  },
  mounted() {
    this.catchArray.GXJDData = this.fromData.basePointEntityList
  },
  methods: {
    validate() {
      let res_bool = false
      this.$refs.fromDataRef.validate(bool => {
        res_bool = bool
      })
      return res_bool
    },
    resetFields() {
      this.$refs.fromDataRef.resetFields()
    },
    // 项目管理员选择改变
    PM_selectChange(select) {
      this.catchArray.PMData = select
      this.fromData.projectManagerId = select.id
    },
    // 工作基点选择改变
    GZJD_selectChange(select) {
      this.catchArray.GXJDData = select
      this.fromData.basePointList = select.map(item => {
        return item.id
      })
    },
    // 委托单位选择改变
    WTDW_selectChange(select) {
      this.catchArray.WTDWata = select
    },
    // 监测单位选择改变
    JCDW_selectChange(select) {
      this.catchArray.JCDW = select
    },
    // 监理单位选择改变
    JLDW_selectChange(select) {
      this.catchArray.JLDW = select
    }
  }
}
</script>

<style scoped>
._tag {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  border: 1px solid;
  border-radius: 4px;
  white-space: nowrap;
  padding: 0 10px;
}

.padding_right {
  padding: 0;
  padding-right: 20px;
}

._tag_default {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}
._tag_success {
  color: #67c23a;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
._tag_info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}
.shadow_box {
}
</style>
